<div id="ps0">
	<div class="personcenterPage clearfix">
	{include file="public/left" /}
	<!-- start -->
		<div class="main_box" id="app1">
			<div>
				<div class="step_panel">
					<div class="step on">
						1.填写课程信息
					</div>
					<div class="step on">
						2.上传课程内容
					</div>
				</div>
			</div>
			<div class="" style="padding:0 20px 20px;">
				<table class="layui-table" lay-skin="line">
				  <colgroup>
				    <col width="80">
				    <col width="180">
				    <col width="200">
				    <col>
				  </colgroup>
				  <thead>
				    <tr>
				      <th>排序</th>
				      <th>章节名称</th>
				      <th>描述</th>
				      <th>操作</th>
				    </tr> 
				  </thead>
				  <tbody >
				  <template  v-for="(item,index) in chapterList">
				    <tr v-if="Object.keys(item).length">
						<td><input type="text" name=""  class="form-control" v-model="item.sort"></td>
						<td><input type="text" name=""  class="form-control" v-model="item.chapter_name"></td>
						<td><input type="text" name=""  class="form-control" v-model="item.chapter_desc"></td>
						<td>
							<div class="layui-btn-container  ">
							  <a :href="item.url" class="layui-btn layui-btn-primary layui-btn-sm" >
							    <i class="layui-icon ">&#xe6ed;</i>
							    课时管理
							  </a>
							  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="editChapter(item);">
							    <i class="layui-icon">&#xe642;</i>修改
							  </button>
							  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="delChapter(item.id);">
							    <i class="layui-icon">&#xe640;</i>删除
							  </button>
							</div>
						</td>
				    </tr>
				    <tr v-else>
						<td><input type="text" class="form-control" v-model="chapter.sort"></td>
						<td><input type="text" class="form-control" v-model="chapter.chapter_name"  placeholder="请输入章节名称" ></td>
						<td><input type="text" class="form-control" v-model="chapter.chapter_desc"></td>
						<td>
							  <button type="button" class="layui-btn layui-btn-primary  layui-btn-fluid" @click="addChapter(chapter.courseID)">
							    保存
							  </button>
						</td>
				    </tr>
				  </template>
				  </tbody>
				</table>
				<a href="{:url('index/course/index')}" class="layui-btn layui-btn-fluid layui-btn-my ">返回课程列表</a>
			</div>
		</div>
	<!-- end -->
	</div>
</div>
<script type="text/javascript">
window.onload=function(){
	element.on('tab(docDemoTabBrief)', function(data){
	  console.log(this); //当前Tab标题所在的原始DOM元素
	  console.log(data.index); //得到当前Tab的所在下标
	  console.log(data);
	  console.log(data.elem); //得到当前的Tab大容器
	});
}
</script>
<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
// 
var el=new Vue({
	el:'#app1',
	data:{
		courseID:0,
		chapter:{courseID:1,chapter_name:'',chapter_desc:''},
		chapterList:[
		]
	},
	methods:{
		// 获取章节列表
		async getChapterList(id){
			let {data}=await this.$http.get('course/chapterList/'+id);
			// console.log(data)
			if(data.code==200){
				this.chapter.sort=data.data.length+1;
				this.fiterArr(data.data);
				data.data.push({});
				this.chapterList=data.data;
			}else{
				this.chapterList=[{}];
			}
		},
		fiterArr(arr){
			for(i in arr){
				arr[i].url='/course/period/'+arr[i].id
			}
		},
		// 添加章节
		async addChapter(id){
			let {data}=await this.$http.post('course/chapter/'+id,this.chapter);
			if(data.code==200){
				layer.msg('添加成功');
				this.chapter.chapter_name='';
				this.chapter.chapter_desc='';
				this.getChapterList(id);
			}else{
				layer.msg('添加失败');
			}
		},
		// 编辑章节
		async editChapter(item){
			let {data} =await this.$http.put('course/chapter/'+item.id,item);
			if(data.code==200){
				layer.msg('编辑成功');
			}else{
				layer.msg('添加失败');
			}
		},
		async delChapter(id){
			let {data}= await this.$http.delete('course/chapter/'+id);
			if(data.code==200){
				layer.msg('删除成功');
				this.chapter.chapter_name='';
				this.chapter.chapter_desc='';
				this.getChapterList(this.courseID);
			}else{
				layer.msg('添加失败');
			}
		}
	},
	created(){
		var id={$id};
		this.chapter.courseID=id;
		this.courseID=id;
		this.getChapterList(id);
	}
})
</script>
